<template>
  <div>
    <div class="mc-recipe-main">
      <div class="mv-recipe-part-div">
        <ToolBarComponent ref="queryRecipeBar" bar-ref-name="operBar" min-height="70px">
        </ToolBarComponent>
        <SelectInputComponent input-type="text" input-name="meterialId" input-lable="合成物名称" ref="targetMeterialName" :select-function="selectClick"/>
        <Button text="新增原料" :click-function="addMeterial"/>
        <Button text="删除原料" :click-function="subMeterial"/>
        <div ref="item-input" v-for="(item,index) of recipeItemNum" v-bind:key="index" class="mc-recipe-item-div">
          <SelectInputComponent :input-lable="'合成物'+(index+1)" input-type="text" input-name="materialName" :ref="'materialName'+index" :select-function="selectClick"/>
          <NumberInputComponent input-lable="需求量" input-name="demandNum" :ref="'demandNum'+index"/>
        </div>
        <div>
          <Button text="提交" :click-function="submitRecipe"/>
        </div>
      </div>
      <div class="mv-recipe-part-div">
        <ToolBarComponent ref="queryBar" bar-ref-name="queryBar" min-height="70px">
          <InputComponent input-lable="合成物名称" input-name="materialNameLike" input-type="text"/>
          <Button text="查询" :click-function="dictQuery"/>
        </ToolBarComponent>
        <!--   物品查询列表   -->
        <GridComponent
            ref="mcItemGrid"
            :auto-load="true"
            key-property-name="id"
            grid-name="mcItemInfoGrid"
            select-moduel="single"
            load-url="mcgame/dictQuery.do"
            max-height-prop="85%"
            :paging-moduel="true"
        >
          <GridColumnComponent width="350px" column-name="物品名称" index-name="dictName"/>
          <GridColumnComponent width="250px" column-name="MOD所属" index-name="modName"/>
        </GridComponent>
      </div>
    </div>
  </div>
</template>

<script>
import ToolBarComponent from "@/components/toolbar/ToolBarComponent";
import InputComponent from "@/components/input/InputComponent";
import GridColumnComponent from "@/components/grid/GridColumnComponent";
import GridComponent from "@/components/grid/GridComponent";
import Button from "@/components/button/ButtonComponent";
import NumberInputComponent from "@/components/input/NumberInputComponent";
import {postRequest} from "@/axio2";
import SelectInputComponent from "@/components/input/SelectInputComponent";

export default {
  name: "McRecipeManagePage",
  components: {
    SelectInputComponent,
    NumberInputComponent, Button, GridComponent, GridColumnComponent, InputComponent, ToolBarComponent},
  data(){
    return{
      recipeItemNum:[],
    }
  },
  methods:{
    dictQuery(){
      let param = this.$refs["queryBar"].getSubmitParams();
      this.$refs["mcItemGrid"].addQueryParams(param);
      this.$refs["mcItemGrid"].load();
    },
    addMeterial(){
      if(this.recipeItemNum.length===9){
        alert("合成原料数量不可能超过9个");
        return;
      }
      this.recipeItemNum.push({});
    },
    subMeterial(){
      if(this.recipeItemNum.length===0){
        return;
      }
      this.recipeItemNum.pop();
    },
    selectClick(event,component){
      let dict = this.$refs["mcItemGrid"].getSelectData();
      if(undefined===dict || dict.length<1){
        return;
      }
      component.setSelectedValue({'display':dict[0].dictName,'value':dict[0].id})
    },
    submitRecipe(){
      for (let i = 0; i < this.recipeItemNum.length; ) {
        // 遍历合成表原料信息
        let item = this.recipeItemNum[i];
        // 获取当前物品的ID和需求数量
        let materialInput = this.$refs["materialName"+i][0];
        let demandNumInput = this.$refs["demandNum"+i][0];
        item["materialId"] = materialInput.getInputValue();
        item["demandNum"] = demandNumInput.getInputValue();
        i = i + 1;
      }
      let target = this.$refs["targetMeterialName"].getInputValue();
      let param = {materialId:target,list:this.recipeItemNum};
      postRequest(
          'mcgame/addRecipe.do',
          param,
          null,
          null,
          this
      );
    }
  }
}
</script>

<style scoped>
.mv-recipe-part-div{
  vertical-align: top;
  display: inline-block;
  height: 100%;
  width: 48%;
  border-left: 1px #2c3e50 solid;
  border-right: 1px #2c3e50 solid;
}
.mc-recipe-main{
  height: 100%;
  width: 100%;
}
.mc-recipe-item-div{
  margin-top: 10px;
  padding-left: 15px;
  border-bottom: 1px #cccccc solid;
}
</style>